<template>
  <el-container style="height: 100vh; border: 5px solid #eee">
    <el-aside width="200px">
      <el-menu :unique-opened="true" :router="true">
        <!-- 设备管理菜单项，仅管理员（身份为 'ad'）可见 -->
        <el-submenu index="1" v-if="userIdentity === 'ad'">
          <template slot="title">
            <i class="el-icon-s-operation" style="color: green"></i>
            设备管理
          </template>
          <el-menu-item index="orderRegistration" :to="{ name: 'OrderRegistration' }">
            <i class="el-icon-s-order" style="color: green"></i>
            订购登记
          </el-menu-item>
          <el-menu-item index="deviceList" :to="{ name: 'deviceList' }">
            <i class="el-icon-info" style="color: green"></i>
            当前设备详情
          </el-menu-item>
          <!-- 购买平台菜单项，仅管理员（身份为 'ad'）可见 -->
          <el-submenu index="2" v-if="userIdentity === 'ad'">
            <template slot="title">
              <i class="el-icon-shopping-cart-2" style="color: green"></i>
              设备订购
            </template>
            <a href="javascript:void(0)" @click="openWebsite('http://www.taobao.com')">
              <i class="el-icon-position" style="color: green"></i>
              淘宝
            </a>
            <a href="javascript:void(0)" @click="openWebsite('http://www.jd.com')">
              <i class="el-icon-position" style="color: green"></i>
              京东
            </a>
            <a href="javascript:void(0)" @click="openWebsite('http://www.tmall.com')">
              <i class="el-icon-position" style="color: green"></i>
              天猫
            </a>
          </el-submenu>
        </el-submenu>
        
        <!-- 设备介绍和返回首页按钮，对所有身份可见 -->
        <el-menu-item index="deviceIntroduction" :to="{ name: 'DeviceIntroduction' }" v-if="userIdentity === 'ad' || userIdentity === 'mem'">
          <i class="el-icon-notebook-1" style="color: green"></i>
          设备介绍
        </el-menu-item>
        <el-menu-item index="home" @click="goToHome" v-if="userIdentity === 'ad' || userIdentity === 'mem'">
          <i class="el-icon-back"></i>
          返回首页
        </el-menu-item>
      </el-menu>
    </el-aside>
    <main class="main" style="flex: 1; display: flex; overflow: auto;">
      <router-view></router-view>
    </main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      userIdentity: '', // 存储用户身份的变量
    };
  },
  mounted() {
    // 从localStorage中读取存储的用户身份信息并赋值给userIdentity变量
    this.userIdentity = localStorage.getItem('userIdentity');
    console.log('当前用户身份：', this.userIdentity);
  },
  methods: {
    goToHome() {
      if (this.$route.path !== '/home') {
        this.$router.push("/home");
      } else {
        console.log("Already at home, no need to navigate.");
      }
    },
    openWebsite(url) {
      window.open(url, '_blank');
    }
  }
}
</script>

<style scoped>
.main {
  background-image: url('../assets/img/equipment.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}
</style>